<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./mui/css/mui.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 13px;
        }

        a {
            text-decoration: none;

            color: black;
        }

        html,
        body {
            background-color: #efeff4;
        }

        .mui-bar .mui-pull-left .mui-icon {
            padding-right: 5px;
            font-size: 28px;
        }

        .mui-bar .mui-btn {
            font-weight: normal;
            font-size: 17px;
        }

        .mui-bar .mui-btn-link {
            top: 1px;
        }

        .mui-table-view li {
            color: blueviolet
        }

        .displaymenue {
            width: 150px;
            height: 300px;

            /* background-color: green; */
            background-color: rgb(161, 214, 235);
            display: none;
            position: fixed;
            z-index: 999;
            right: 0;
            top: 0;
        }

        .displaymenue li {
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-bottom: 1px solid gray;

        }

        .mui-modal {
            right: 1px;
        }
    </style>
</head>

<body>
    <header id="header" class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">项目会议</h1>
        <a class="mui-icon mui-icon-bars mui-pull-right" id="mask">
        </a>

        <ul class="displaymenue">
            <a href="">
                <li>项目</li>
            </a>
            <a href="">
                <li>会议</li>
            </a>
        </ul>

    </header>


    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">

            <ul class="mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell">
                    <a href="#modal">...项目 1</a>


                    <div id="modal" class="mui-modal">
                        <header class="mui-bar mui-bar-nav">
                            <a class="mui-icon mui-icon-close mui-pull-right" href="#modal"></a>
                            <h1 class="mui-title">项目一会议详情</h1>
                        </header>
                        <div class="mui-content" style="height: 100%;">
                            <p class="mui-content-padded">
                                会议时间：</p>
                            <p class="mui-content-padded">
                                会议地点：</p>
                            <p class="mui-content-padded">
                                参会人：</p>
                                <p class="mui-content-padded">
                                会议摘要：</p>
                         


                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <a href="#modal">...项目 2</a>


                    <div id="modal" class="mui-modal">
                        <header class="mui-bar mui-bar-nav">
                            <a class="mui-icon mui-icon-close mui-pull-right" href="#modal"></a>
                            <h1 class="mui-title">项目二会议详情</h1>
                        </header>
                        <div class="mui-content" style="height: 100%;">
                            <p class="mui-content-padded"></p>
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <a href="#modal">...项目 3</a>


                    <div id="modal" class="mui-modal">
                        <header class="mui-bar mui-bar-nav">
                            <a class="mui-icon mui-icon-close mui-pull-right" href="#modal"></a>
                            <h1 class="mui-title">项三会议详情</h1>
                        </header>
                        <div class="mui-content" style="height: 100%;">
                            <p class="mui-content-padded"></p>
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <a href="#modal">...项目 4</a>


                    <div id="modal" class="mui-modal">
                        <header class="mui-bar mui-bar-nav">
                            <a class="mui-icon mui-icon-close mui-pull-right" href="#modal"></a>
                            <h1 class="mui-title">项目四会议详情</h1>
                        </header>
                        <div class="mui-content" style="height: 100%;">
                            <p class="mui-content-padded"></p>
                        </div>
                    </div>
                </li>


            </ul>
        </div>
    </div>
</body>

<script src="./mui/js/mui.min.js"></script>
<script src="./jquery/jquery-1.12.2.js"></script>

<script>

    mui.init({
        swipeBack: true,//启用右滑关闭功能
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                callback: pulldownRefresh
            },
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }//启用右滑关闭功能
    });


    /**
			 * 下拉刷新具体业务实现
			 */
    function pulldownRefresh() {
        setTimeout(function () {
            var table = document.body.querySelector('.mui-table-view');
            var cells = document.body.querySelectorAll('.mui-table-view-cell');
            for (var i = cells.length, len = i + 3; i < len; i++) {
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell';
                li.innerHTML = '<a class="mui-navigate-right">...项目 ' + (i + 1) + '</a>';
                //下拉刷新，新纪录插到最前面；
                table.insertBefore(li, table.firstChild);
            }
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
        }, 1000);
    }
    var count = 0;
    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh() {
        setTimeout(function () {
            mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
            var table = document.body.querySelector('.mui-table-view');
            var cells = document.body.querySelectorAll('.mui-table-view-cell');
            for (var i = cells.length, len = i + 10; i < len; i++) {
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell';
                li.innerHTML = '<a class="mui-navigate-right">...项目' + (i + 1) + '</a>';
                table.appendChild(li);
            }
        }, 1000);
    }

    /*  var marsk=document.getElementById('mask');
     var displaymenue=document.getElementsByClassName('displaymenue');
     marsk.onclick=function(){
         
     } */

    $(function () {
        $('#mask').click(function () {
            // alert('liao')
            $('.displaymenue').show(500);

        })

    })






</script>

</html>